<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
        <span @click="$emit('clear-search-histories')">全部删除</span>&nbsp;;
        <span @click="isDeleteShow = false">完成</span>
      </div>
      <van-icon v-else name="delete" @click="isDeleteShow = true" />
    </van-cell>
    <van-cell v-for="(item, index) in searchHistories" :key="index" :title="item" 
      @click="onSearchItemClick(item, index)">
      <van-icon v-if="isDeleteShow" name="close" />
    </van-cell>
  </div>
</template>
   

<script>
export default {
  name: "searchHistory",
  data() {
    return {
      isDeleteShow: false, // 控制删除显示状态
    };
  },
  //props数据是受父组件影响的
  //如果是普通{字符串，数字，布尔值}绝对不能修改的即使改了也不能传回父组件
  //如果是对象 数组 等引用类型可以修改但不能重新赋值例如**=【】
  props: {
    searchHistories: { //父亲传过来的历史记录的数据
      type: Array,
      required: true,
    },
  },
  methods: {
    //删除点击事件
    onSearchItemClick(item, index) {
      if (this.isDeleteShow) {
        //如果是删除状态，删除历史记录
        this.searchHistories.splice(index,1)
      } else {
        //非删除状态，直接进入搜索
         this.$emit('search', item)
      }
    }
  },
};
</script>

<style lang="less" scoped>
</style>